<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();

const valueHtml = ref(
  "<p>市、县（区）各级人民防空主管部门应当按照人民防空基本方案明确的能力需求和备战要求，制定中长期建设发展规划和年度工作计划，推荐方案计划向规划计划转化，以方案计划统领人民防空战备建设。</p>"
);
const valueHtml1 = ref(
  "<p>实战化训练演练：人民防空指挥机构、地方人民防空主管部门、重要目标单位、人民防空专业队伍、城镇居民应当按照相关规定，紧贴任务、对手和环境，把方案计划转化为具体的训练实践、训练内容、训练方法，组织开展实战化训练演练，做到依案施训、实案实训。<br/>（1）人民防空指挥部训练实行周期制，每个训练周期为XX年。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；演习不少于XX个训练日XX个训练小时。参训率要达到编成人数的XX%以上；<br/>（2）人民防空机关训练实行周期制，每个训练周期为XX年。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；参加演习不少于XX个训练日XX个训练小时。机关参训率要达到在岗人数的XX%以上；<br/>（3）人民防空指挥信息保障中心训练实行周期制，每个训练周期为XX年。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；参加演习不少于XX个训练日XX个训练小时。指挥信息保障中心参训率要达到在岗人数的XX%以上；<br/>（4）人民防空工程维护管理单位训练实行周期制，每个训练周期为5年。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；参加演习不少于XX个训练日XX个训练小时。参训率要达到在岗人数的XX%以上；<br/>（5）群众防空组织训练实行周期制，每个训练周期为XX年。每年度安排XX的编组分队，XX年轮训一遍。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；参加演习不少于XX个训练日XX个训练小时。参训率要达到当年度参训分队编组人数的XX%以上；<br/>（6）重要目标单位训练实行周期制，每个训练周期为XX年。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；参加演习不少于XX个训练日XX个训练小时。重要目标单位参训率要达到编组人数的XX%以上；<br/>（7）人民防空工程技术保障单位训练实行周期制，每个训练周期为XX年。年度训练时间不少于XX个训练日XX个训练小时。其中，共同训练不少于XX个训练日XX个训练小时；专业训练不少于XX个训练日XX个训练小时；参训率要达到在岗人数的XX%以上；<br/>（8）城镇居民应依法参加一定时间的人民防空教育训练。</p>"
);

const valueHtml2 = ref(
  "<p>（1）大理州人民防空方案计划检验评估通常采取集中评定、现地检查、战备拉动、综合演练等方式，由省人民防空指挥部组织，政府相关部门参加；（2）省每年组织一次检查，对辖区内城市人民防空方案计划进行检验评估，查找分析问题，提出修订建议。遇有特殊情况适时组织。</p>"
);

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};

const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "备战要求" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "针对性战备建设")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "实战化训练演练")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "常态化检验评估")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "备战要求",
      data: [
        {
          k: "针对性战备建设",
          v: valueHtml.value,
        },
        {
          k: "实战化训练演练",
          v: valueHtml1.value,
        },
        {
          k: "常态化检验评估",
          v: valueHtml2.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="针对性战备建设" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="实战化训练演练" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="常态化检验评估" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>
